<template>
	<view class="page-view">
		<u-navbar>
			<u-search shape="round" placeholder="请输入您需要搜索的内容" v-model="keywords" @focus="hasResult=false" :clearabled="false"
				@custom="searchHandle" @search="searchHandle">
				<u-button type="primary" shape="circle" size="mini" hover-class="none" @click="searchHandle">搜索</u-button>
			</u-search>
		</u-navbar>

		<view class="bg-white u-flex-1 u-p-30" v-if="!hasResult">
			<view class="u-font-28 font-medium">搜索把关热词</view>
			<view class="u-flex u-flex-wrap">
				<view class="u-m-t-20 u-m-r-20" v-for="(words,i) in hotWords" :key="i">
					<u-tag :text="words" type="info" border-color="transparent" @click="keywords = words"></u-tag>
				</view>
			</view>
		</view>

		<view class="result-list u-p-30" v-show="hasResult">
			<mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback" height="100%">
				<template v-if="searchtype==1">
					<view v-for="(item,index) in powerList" :key="index">
						<bb-member :info="item"></bb-member>
					</view>
				</template>
				<template v-if="searchtype==2">
					<view v-for="(item,index) in demandList" :key="index">
						<bb-demand :info="item"></bb-demand>
					</view>
				</template>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				hasResult: false,
				hotWords: ['律师', '房产', '装修', '车检', '合同签约', '装修', '投融资', '婚丧嫁娶'],
				keywords: '',
				searchtype: 1, //1 服务  2 需求
				powerList: [],
				demandList: [],
			};
		},
		onLoad(e) {
			this.searchtype = e.type
		},
		methods: {
			upCallback(page) {
				if (this.searchtype == 1) {
					this.queryServer(page)
				} else if (this.searchtype == 2) {
					this.queryDemand(page)
				}
			},
			searchHandle() {
				this.hasResult = true
				this.mescroll.resetUpScroll();
			},
			// 搜索需求
			queryDemand(page) {
				const location = this.$store.state.vuex_address.location
				this.$u.api.public.demand_lst({
					keyword: this.keywords,
					location,
					order: 'location',
					page: page.num,
					limit: page.size,
					class_one_id: ''
				}).then(res => {
					this.demandList = page.num == 1 ? res : [...this.demandList, ...res];
					this.mescroll.endSuccess(res.length, res.length >= page.size);
				})
			},
			// 搜索服务
			queryServer(page) {
				const location = this.$store.state.vuex_address.location
				this.$u.api.public.power_lst({
					keyword: this.keywords,
					location,
					order: 'location',
					page: page.num,
					limit: page.size,
				}).then(res => {
					this.powerList = page.num == 1 ? res : [...this.powerList, ...res];
					this.mescroll.endSuccess(res.length, res.length >= page.size);
				})
			}
		}
	}
</script>

<style lang="scss">
	.page-view {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.result-list {
		flex: 1;
		height: 0;
		overflow: hidden;
	}
</style>